<template>
  <div class="evaluation">
    <div class="titleRow flex flex-between">
      <p class="title">宝贝评价（{{ item.evaluationNum }}）</p>
      <p class="more">查看全部评论</p>
    </div>
    <div class="tags">
      <div class="tagBox flex">
        <div class="tag" v-for="(tag,index) in item.evaluationTags" :key="'tag'+index">
          {{ tag }}
        </div>
      </div>

    </div>
    <div class="commons">
      <div class="common" v-for="(common,index) in item.evaluationCommons" :key="'common'+index">
        <div class="flex">
          <img src="@/assets/img/goodsMore/common_avatar.png">
          <div class="flex flex-column flex-around">
            <p class="name">{{ common.name }}</p>
            <p class="time">{{ common.time }}</p>
          </div>
        </div>
        <p class="des van-multi-ellipsis--l2">{{ common.des }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "evaluation",
  props: {
    item: {
      type: Object
    }
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
.evaluation {
  background-color: #fff;
  margin: .2rem;
  border-radius: .4rem;

  .titleRow {
    padding: .4rem;

    .title {
      font-size: .5rem;
      font-weight: 550;
    }

    .more {
      font-size: .4rem;
      color: #FF7700;
      font-weight: 550;
    }
  }

  .tagBox::-webkit-scrollbar {
    display: none
  }

  .tags {
    //padding: 0 .4rem;
    .tagBox{
      overflow: scroll;
      margin: 0 .4rem;
      .tag {
        padding: .1rem .3rem;
        border-radius: .4rem;
        background-color: #FFECEA;
        flex-shrink: 0;
        font-size: .4rem;
        margin-right: .2rem;
        font-weight: 550;
      }
    }

  }

  .commons {
    padding: .2rem .4rem;

    .common {
      margin: .4rem 0;

      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        margin-right: .2rem;
      }

      .name {
        font-size: .4rem;
        font-weight: 550;
      }

      .time {
        font-size: .4rem;
        color: #999999;
      }

      .des {
        margin: .2rem 0 0 .1rem;
        font-weight: 550;
        font-size: .4rem;
      }
    }
  }
}
</style>